﻿@page "/fetchdata/todoitem/edit/{Id:int}"

@using MaBlaApp.Data
@inject TodoService MyTodoService
@inject IJSRuntime JSRuntime

<ul class="list-group">
    <li class="list-group-item list-group-item-primary d-flex justify-content-between">
        <strong class="align-self-center">修改任务</strong>
        <button class="btn btn-primary btn-sm" @onclick=Back>返回</button>
    </li>
</ul>

@if (todoItem is null)
{
    <p><em>任务不存在...</em></p>
}
else
{
    <ul class="list-group" style="overflow:auto">
        <li class="list-group-item d-flex justify-content-between mb-1">
            <strong class="align-self-center">@nameof(todoItem.Id)</strong>
            <small>@todoItem.Id</small>
        </li>
        <li class="list-group-item d-flex justify-content-between mb-1">
            <strong class="align-self-center">@nameof(todoItem.Title)</strong>
            <input type="text" class="form-control" style="width: 50%;" maxlength="20"
            @bind-value="todoItem.Title" placeholder="任务标题" />
        </li>
        <li class="list-group-item d-flex justify-content-between mb-1">
            <strong class="align-self-center">@nameof(todoItem.Description)</strong>
            <input type="text" class="form-control" style="width: 50%;" maxlength="20"
            @bind-value="todoItem.Description" placeholder="任务描述" />
        </li>
        <li class="list-group-item d-flex justify-content-between mb-1">
            <strong class="align-self-center">@nameof(todoItem.CreatedDate)</strong>
            <input type="date" class="form-control" style="width: 50%;"
            @bind-value="todoItem.CreatedDate" min="2023-1-1" max="2023-12-31" />
        </li>
        <li class="list-group-item d-flex justify-content-between mb-1">
            <strong class="align-self-center">优先级</strong>
            <select class="form-control" style="width: 50%;" @bind="todoItem.Priority">
                <option value=@TodoPriority.Low>低</option>
                <option value=@TodoPriority.Middle>中</option>
                <option value=@TodoPriority.High>高</option>
            </select>
        </li>
        <li class="list-group-item d-flex justify-content-between mb-1">
            <strong class="align-self-center">@nameof(todoItem.IsFinished)</strong>
            <div class="form-check form-switch">
                <input type="checkbox" class="form-check-input" @attributes=IsFinishedCss
                @bind-value="todoItem.IsFinished" />
            </div>
        </li>
    </ul>
}

@code {
    [Parameter]
    public int Id { get; set; }

    private TodoItem todoItem;

    private Dictionary<string, object>? IsFinishedCss => todoItem.IsFinished ? new() { { "checked", "" }, } : null;

    protected override void OnInitialized()
    {
        todoItem = MyTodoService.TodoItems.FirstOrDefault(x => x.Id == Id);

        if (todoItem is null)
            return;

    }

    private async void Back()
    {
        await JSRuntime.InvokeVoidAsync("window.history.back");
    }
}
